<template>
  <div class="home">
    <!-- bg-img -->
    <div class="bg_img">
      <div class="title">
        eCASC
      </div>
    </div>
    <!-- downimg -->
    <div class="down"></div>
    <!-- count -->
    <div class="count">5.0分 <span>{{ count }}</span>次下载 100M</div>
    <!-- btn -->
    <div class="btn">
      <van-button
        class="btn_sub"
        color="#2683FA"
        size="large"
        @click="downfn"
      >登录eCASC手机端</van-button>
      <!-- <a
        class="btn_sub"
        :href="href"
      >登录eCASC手机端</a> -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import deviceInfo from '@/utils/index'
export default {
  name: 'Success',
  components: {},
  data() {
    return {
      device: null,
      userName: '',
      pw: '',
      count: 1234,
      href: 'https://sj.qq.com/myapp/detail.htm?apkName=com.ctripcorp.htkjtrip'
    }
  },
  created() {
    this.device = deviceInfo()
    if (this.device.iPhone) {
      this.href = 'https://apps.apple.com/cn/app/eCASC/id1474034891'
    } else if (this.device.android) {
      this.href =
        'https://sj.qq.com/myapp/detail.htm?apkName=com.ctripcorp.htkjtrip'
    }
  },

  methods: {
    downfn() {
      console.log('====')
      location.href = this.href
      // 1474034891
      // https://apps.apple.com/cn/app/eCASC/id1474034891
      // const iosLinkUrl = 'http://apps.apple.com/cn/app/1474034891'
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  background: #f4f4f4;
  height: 100%;
}
.bg_img {
  width: 750px;
  height: 176px;
  background-color: #2683fa;
}
.close {
  display: inline-block;
  width: 26px;
  height: 26px;
  position: absolute;
  /* border: 1px solid red; */
  left: 38px;
  top: 114px;
  background: url('../assets/register/关闭@2x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.title {
  position: absolute;
  left: 314px;
  top: 112px;
  color: #ffffff;
  font-family: 'Source Han Sans CN';
  font-size: 36px;
  font-weight: 'Regular';
  /* line-height: .32rem; */
  text-align: center;
}
.more {
  display: inline-block;
  width: 54px;
  height: 54px;
  position: absolute;
  top: 100px;
  left: 672px;
  background-image: url('../assets/register/更多@2x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.down {
  width: 238px;
  height: 238px;
  /* border: 1px solid red; */
  position: absolute;
  left: 256px;
  top: 474px;
  background-image: url('../assets/2977/组 2977@2x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.count {
  width: 378px;
  height: 30px;
  position: absolute;
  left: 186px;
  top: 770px;
  color: #333333;
  font-size: 30px;
  font-weight: Regular;
  text-align: center;
  line-height: 50px;
}
.btn {
  width: 622px;
  height: 80px;
  position: absolute;
  left: 66px;
  top: 870px;
  background: #2683fa;
}
.btn_sub {
  width: 100%;
  display: inline-block;
  height: 80px;
  font-size: 30px;
  color: #ffffff;
  text-align: center;
  line-height: 80px;
}
</style>
